@import "functions.scss";

// 占满占满占满
$base-font-size: 100% !default;
// 行高1比较好控制..
$base-line-height: 1.5 !default;

// box-sizing前缀统一追加
// $type - Default: border-box
@mixin box-sizing ($type:border-box) {
  -webkit-box-sizing: $type; // Android < 2.3, iOS < 4
     -moz-box-sizing: $type; // Firefox < 29
          box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
}

// 清除浮动
@mixin clearfix {
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}

// 创建三行汉堡
// $width - 汉堡的宽度
// $left - 如果为false就居中显示 | 设置rem
// $top - 如果为false就垂直居中 | 设置为rem
// $thickness - 设置厚度的像素值
// $gap - 行之间的像素间隔
// $color - 图标颜色
// $offcanvas - 设置是否画图
@mixin hamburger ($width, $left, $top, $thickness, $gap, $color, $offcanvas) {

  &::after {
    content: "";
    display: block;
    width: $width;
    position: absolute;

    @if $offcanvas {
      @if $top {
        top: $top;
      }@else {
        top: 50%;
        margin-top: (-$width / 2);
      }
      @if $left {
        left: $left;
      }@else {
        left: $thickness;
      }
    }@else {
      top: 50%;
      margin-top: -($width/2);
      left: $thickness;
    }

    box-shadow:
      0 0 0 $thickness $color,
      0 $gap + $thickness 0 $thickness $color,
      0 (2 * $gap + 2 * $thickness) 0 $thickness $color;
  }
}

// 控制圆角
// $radius - Default: $global-radius || 4px
@mixin radius ($radius:$global-radius) {
  @if $radius {
    border-radius: $radius;
  }
}

// 控制侧边圆角
// $side - Options: left, right, top, bottom
// $radius - Default: $global-radius || 4px
@mixin side-radius ($side, $radius:$global-radius) {
  @if ($side == left or $side == right) {
    -webkit-border-bottom-#{$side}-radius: $radius;
    -webkit-border-top-#{$side}-radius: $radius;
    border-bottom-#{$side}-radius: $radius;
    border-top-#{$side}-radius: $radius;
  } @else {
    -webkit-#{$side}-left-radius: $radius;
    -webkit-#{$side}-right-radius: $radius;
    border-#{$side}-left-radius: $radius;
    border-#{$side}-right-radius: $radius;
  }
}

// 管理变化动画
// $property - Default: all, 监听属性.
// Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
// $speed - Default: 300ms 持续时间.
// $ease - Default: ease-out, 变化速率.
// Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
@mixin single-transition ($property:all, $speed:300ms, $ease:ease-out) {
  transition: $property $speed $ease;
}


// 用于元素的2d移动
// $horizontal: Default: 0
// $vertical: Default: 0
@mixin translate2d ($horizontal:0, $vertical:0) {
  transform: translate($horizontal, $vertical);
}

// 用于元素的2d旋转
// $horizontal: Default: 0
// $vertical: Default: 0
@mixin rotate2d ($angle:0deg) {
  transform: rotate($angle);
}

// 用边框创建等边三角形
// $triangle-size - 设置边框大小.
// $triangle-color - 控制边框颜色.
// $triangle-direction - 用于控制三角方向.
// Options: top, bottom, left, right
@mixin css-triangle ($triangle-size, $triangle-color, $triangle-direction) {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: inset $triangle-size;
  @if ($triangle-direction == top) {
    border-color: $triangle-color transparent transparent transparent;
    border-top-style: solid;
  }
  @if ($triangle-direction == bottom) {
    border-color: transparent transparent $triangle-color transparent;
    border-bottom-style: solid;
  }
  @if ($triangle-direction == left) {
    border-color: transparent transparent transparent $triangle-color;
    border-left-style: solid;
  }
  @if ($triangle-direction == right) {
    border-color: transparent $triangle-color transparent transparent;
    border-right-style: solid;
  }
}

// 居中定位
// $height - 高度
// $left - 左距离
// $right - 右距离
@mixin posi-vertical-middle ($c-height: null, $c-left: null, $c-right: null) {
  @if $c-height {
    position: absolute;
    top: 50%;
    height: $c-height;
    margin-top: -($c-height / 2);
  }

  @if $c-left { left: $c-left; }
  @if $c-right { right: $c-right; }
}

// 创建三行汉堡
// $width - 汉堡的宽度
// $left - 如果为false就居中显示 | 设置rem
// $top - 如果为false就垂直居中 | 设置为rem
// $thickness - 设置厚度的像素值
// $gap - 行之间的像素间隔
// $color - 图标颜色
// $offcanvas - 设置是否画图
@mixin hamburger ($width, $left, $top, $thickness, $gap, $color, $offcanvas) {

  &::after {
    content: "";
    display: block;
    width: $width;
    position: absolute;

    @if $offcanvas {
      @if $top {
        top: $top;
      }@else {
        top: 50%;
        margin-top: (-$width / 2);
      }
      @if $left {
        left: $left;
      }@else {
        left: $thickness;
      }
    }@else {
      top: 50%;
      margin-top: -($width/2);
      left: $thickness;
    }

    box-shadow:
      0 0 0 $thickness $color,
      0 $gap + $thickness 0 $thickness $color,
      0 (2 * $gap + 2 * $thickness) 0 $thickness $color;
  }
}

$white         : #3D3835 !default;
$ghost         : #FAFAFA !default;
$snow          : #F9F9F9 !default;
$vapor         : #F6F6F6 !default;
$white-smoke   : #F5F5F5 !default;
$silver        : #EFEFEF !default;
$smoke         : #EEEEEE !default;
$gainsboro     : #DDDDDD !default;
$iron          : #CCCCCC !default;
$base          : #AAAAAA !default;
$aluminum      : #999999 !default;
$jumbo         : #888888 !default;
$monsoon       : #777777 !default;
$steel         : #666666 !default;
$charcoal      : #555555 !default;
$tuatara       : #444444 !default;
$oil           : #333333 !default;
$jet           : #222222 !default;
$black         : #000000 !default;

// // 基准颜色
// $primary-color: #3b9eff !default;   // 主要的
// $secondary-color: #f0f0f0 !default; // 次要的
// $alert-color: #ff5c54 !default;     // 提示
// $success-color: #43AC6A !default;   // 成功
// $warning-color: #f08a24 !default;   // 警告
// $info-color: #87c4ff !default;      // 信息

// 基础预定义颜色
$base-font-color: #505152;

// 控制默认字体
$font-family: \5fae\8f6f\96c5\9ed1, tahoma;

// 控制默认字体粗细
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;

// 控制全局样式
$body-bg: #ffffff !default;
$body-font-color: $base-font-color !default;
$body-font-family: $font-family !default;
$body-font-weight: $font-weight-normal !default;
$body-font-style: normal !default;

// 控制字体平滑
$font-smoothing: antialiased !default;

// 控制整体间距
$body-area-spac: rem-calc(20); // 区域
$body-block-spac: rem-calc(14); // 块
$body-join-spac: rem-calc(10); // 衔接(动词?)

// 媒体查询
$small-range: (0, 40em) !default;
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em, 99999999em) !default;

@include exports ("global") {
  // 跟随着
  html, body { height: 100%; }

  // 处理全局宽高的计算方式
  *,
  *:before,
  *:after {
   @include box-sizing(border-box);
  }

  html, body { font-size: $base-font-size; }
  body {
    background: $body-bg;
    color: $body-font-color;
    padding: 0;
    margin: 0;
    font-family: $body-font-family;
    font-weight: $body-font-weight;
    font-style: $body-font-style;
    line-height: $base-line-height; // 1
    position: relative;

    //a:hover { cursor: default; }
    img { max-width: 100%; height: auto; }
    img { -ms-interpolation-mode: bicubic; }
    img {
      display: inline-block;
      vertical-align: middle;
    }

    // 确保自动文本区呈现出高度
    textarea { height: auto; min-height: 50px; }
    // 默认选择元素100%宽度
    select { width: 100%; }

    // 好用的类
    .left { float: left !important; }
    .right { float: right !important; }
    .clearfix { @include clearfix; }
    .hide { display: none; }
    .height-full { height: 100%; }
    // 隐藏但维持布局
    .invisible { visibility: hidden; }
    .inline-block { display: inline-block; }
    .lzero { line-height: 0; }
    .nonesel {
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none;  /*webkit浏览器*/
      -ms-user-select: none;   /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      user-select: none;
    }
    .width-transition {
      @include single-transition(width);
    }
    .mr-transition {
      @include single-transition(margin-right);
    }
    .height-transition {
      @include single-transition(height);
    }
  }
}
